<template>
  <div class="upload-cert">
    <div class="upload-title">
      <span v-if="requiredFlag" class="red-star"></span>{{ title }}
    </div>
    <el-upload
      class="avatar-uploader"
      :action="uploadAction"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      accept=".png,.jpeg,.jpg,.gif,.bmp"
      :on-change="uploadFile"
    >
      <img
        v-if="imgUrl"
        :src="imgUrl"
        class="avatar"
        style="width: 120px; height: auto"
      />
      <div class="img-center" v-else>
        <img src="@/assets/images/img_add.png" />
        <div class="click-upload">点击上传</div>
      </div>
    </el-upload>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, computed } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  imgThumbnail: {
    type: String,
    default: "",
  },
  imgFileId: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  requiredFlag: {
    type: Boolean,
    default: false,
  },
});

// const uploadAction = ref(
//   `http://${
//     import.meta.env.VITE_SERVER_ACCOUNT
//   }/api/v1/account/file/uploadHWReturnId`
// );

const uploadAction = ref(
  import.meta.env.PROD ? `${import.meta.env.VITE_SERVER_ACCOUNT}/api/v1/account/file/uploadHWReturnId` : '/api/v1/accountfile/uploadHWReturnId'
);

const emit = defineEmits(["update:imgThumbnail", "update:imgFileId"]);
let imgUrl: any = computed({
  get() {
    return props.imgThumbnail;
  },
  set(val: any) {
    emit("update:imgThumbnail", val);
  },
});

let fileId: any = computed({
  get() {
    return props.imgFileId;
  },
  set(val: any) {
    emit("update:imgFileId", val);
  },
});

const uploadFile = async (uploadFile: any) => {
  let imgBase64: any = await MyModule.utile.imageFileToBase64(uploadFile.raw);
  imgUrl.value = imgBase64;
};

// 上传成功
function handleAvatarSuccess(res: any) {
  if (res.code === 200) {
    fileId.value = res.data;
  }
}

// 上传之前
function beforeAvatarUpload(rawFile: any) {
  if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("图片大小不能超过10M");
    return false;
  }
  return true;
}
</script>

<style scoped lang="scss">
.avatar-uploader {
  background: #f6f6f6;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
:deep(.avatar-uploader .el-upload) {
  width: 120px;
  height: 120px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.img-center {
  line-height: 0;
  width: 100%;
  text-align: center;
}
.click-upload {
  margin-top: 10px;
  line-height: 20px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  font-style: normal;
  text-transform: none;
}
.upload-title {
  margin-bottom: 4px;
  display: inline-block;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.red-star::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
</style>
